<template>
    <div class="bg-white rounded-xl shadow-sm overflow-hidden sticky top-4">
        <h3 class="p-4 border-b border-neutral-medium/30 font-semibold">流程详情导航</h3>

        <div class="divide-y divide-neutral-medium/30">
            <button v-for="(step, index) in steps" :key="index"
                class="w-full flex items-center justify-between p-4 text-left transition-bg"
                :class="step.active ? 'bg-primary/5 hover:bg-primary/10 font-medium text-primary' : 'hover:bg-neutral-light/50'"
                @click="selectStep(index)">
                <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-white mr-3 flex-shrink-0"
                        :class="step.active ? 'bg-primary' : step.completed ? 'bg-success' : 'bg-neutral-medium'">
                        <i :class="step.icon" class="text-sm"></i>
                    </div>
                    <span class="text-sm">{{ step.title }}</span>
                </div>
                <i class="fa" :class="step.active ? 'fa-angle-up text-primary' : 'fa-angle-down text-neutral'"></i>
            </button>
        </div>

        <div class="p-4 border-t border-neutral-medium/30">
            <h4 class="text-sm font-medium mb-3">处理时效标准</h4>
            <ul class="space-y-2 text-sm">
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>简单案件：3-5个工作日</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>一般案件：7-10个工作日</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                    <span>复杂案件：15-20个工作日</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-exclamation-circle text-warning mt-1 mr-2"></i>
                    <span>特殊情况可申请延期处理</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface ProcessStep {
    title: string
    icon: string
    completed: boolean
    active: boolean
}

const steps = ref<ProcessStep[]>([
    {
        title: '1. 案件提交',
        icon: 'fa fa-file-text-o',
        completed: true,
        active: false
    },
    {
        title: '2. 材料审核',
        icon: 'fa fa-check-circle-o',
        completed: true,
        active: false
    },
    {
        title: '3. 双方调解',
        icon: 'fa fa-exchange',
        completed: true,
        active: false
    },
    {
        title: '4. 案件裁决',
        icon: 'fa fa-gavel',
        completed: false,
        active: true
    },
    {
        title: '5. 结果执行',
        icon: 'fa fa-check-square-o',
        completed: false,
        active: false
    }
])

const selectStep = (index: number) => {
    // 重置所有步骤的活动状态
    steps.value.forEach((step, i) => {
        step.active = i === index
    })

    // 在实际应用中，这里会加载对应步骤的详情内容
    console.log(`加载步骤详情: ${steps.value[index].title}`)
}
</script>
